# Requester

### Описание

Пример расширения с демонстрацией работы **API chrome.webRequest**.
Данное API предназначено для просмотра запросов и ответов в их различных состояниях.
Запросы и ответы просматриваются в фоновом режиме без открытия инструментов разработчка браузера, но нет возможности 
просматривать содержимое ответов.
Описание всех состояний и их параметров находится в [спецификации](https://developer.chrome.com/docs/extensions/reference/webRequest/).
Для запросов есть возможность просмотра тела запроса.

### Технологии

* JavaScript
* Chrome API
* Chrome DevTools

### Установка

1. Загрузить zip-архив репозитория или клонировать репозиторий
2. Распаковать архив
3. Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:

```
chrome://extensions/
```

4. В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
5. В верхней левой части экрана нажать кнопку 'Загрузить распакованное расширение' и указать путь к папке '/extension'
   из п.2

### Описание работы

Для демонстрации работы расширения необходимо:

- установить расширение;
- открыть инструменты разработчика и перейти на вкладку 'Web Requester';
- обновить любую вкладку (нажать Ctrl+R) для получения запросов на вкладке Network (Сеть) и отображении их на вкладке 
'Web Requester';

### Дополнительно

В папке 'other' содержатся модель данных, получаемая в методе **chrome.webRequest.onCompleted**.

**API chrome.webRequest** доступен в следующих модулях:
* background
* devtools
* panel
* options
* popup

Наиболее удобно отслеживать запросы и ответы в модуле 'background' и отправлять данные в другой модуль по запросу или по 
срабатыванию текущего метода.

Возможно использовать три способа вызова метода получения запросов и ответов:

1. Обычный вызов. Его недостатвом является невозможность передачи экземпляра класса в коллбэк-функция просмотра запроса 
и ответа _details_.
Пример кода данного способа вызова:
```
chrome.webRequest.onBeforeSendHeaders.addListener( // onBeforeSendHeaders - тип просматривоемого события
  async function(details) {
    console.log(details)
  },
  {
    urls: ["<all_urls>"], // Обязательный параметр - разрешенные для просмотра url
    types: [ chrome.webRequest.ResourceType.XMLHTTPREQUEST ] // Необязательный параметр - тип просматриваемых запросов
  },
  [ chrome.webRequest.OnBeforeSendHeadersOptions.REQUEST_HEADERS ] // Тип запросов, для кажого вида событий указываются свои типы
)
```

2. Второй способ аналогичен первому, за исключением того, что методы и параметры формируются отдельно и передаются как 
параметры. Недостаток у данного способа такой же как у первого - проблема с передачей экземпляра класса в коллбэк. 
Пример кода данного способа вызова:
```
/**
* Создание коллбэк функции для вывода содержимого запроса и ответа
*/
let callbackOnBeforeRequest = function(details) {
    console.log(details);
}
let filterOnBeforeRequest = {
                urls: ["<all_urls>"],
                types: [ chrome.webRequest.ResourceType.XMLHTTPREQUEST ]
             }
let optExtraInfoSpecOnBeforeRequest = [ chrome.webRequest.OnBeforeRequestOptions.REQUEST_BODY ];
chrome.webRequest.onBeforeRequest.addListener(
    callbackOnBeforeRequest, filterOnBeforeRequest, optExtraInfoSpecOnBeforeRequest
)
```

3. Третий способ аналогичен второму, его пример приведен в файле **panel.js**.
По способу вызова он аналогичен второму способу, но благодаря созданию метода с замыканием отсутствует недостаток с передачей 
экземпляра класса снаружи. В третьем способе так же возможно перенести в класс метод создания коллбэка с замыканием.